<template>
	<div>
		<div class="search">
			<input v-model="searchKey" type="text" class="search-input" placeholder="请输入城市/拼音">
		</div>
		<div class="city-list-wrap" ref="wrapper" v-show="searchKey">
			<ul class="city-list">
				<li class="city-item border-bottom" @click="handeCityClick(item.name)" v-for="item of cityArr" :key="item.id">{{item.name}}</li>
				<li class="city-item border-bottom" v-show="!cityArr.length">没有找到匹配数据</li>
			</ul>
		</div>
		
	</div>
	
</template>
<script>
	import Bscroll from "better-scroll"
	import {mapMutations} from "vuex"
	export default{
		name:"CitySearch",
		props:{
			cities:Object
		},
		methods:{
			handeCityClick(city){
				this.changeCity(city)
				this.$router.push("/")
			},
			...mapMutations(["changeCity"])
		},
		data(){
			return{
				searchKey:"",
				cityArr:[]
			}
		},
		watch:{
			searchKey(val){
				if(!this.searchKey){
					this.cityArr=[]
					return
				}
				let result = []
				for(let key in this.cities){
					this.cities[key].forEach((item,index) => {
						if(item.name.indexOf(this.searchKey) != -1 || item.spell.indexOf(this.searchKey) != -1){
							result.push(item)
						}
					})
				}
				this.cityArr = result
			}
		},
		mounted(){
			this.scroll = new Bscroll(this.$refs.wrapper)
		}
	}
</script>
<style lang="less" scoped>
	@import "~less/common/base.less";
	.city-list-wrap /deep/ .border-bottom{
		border-bottom: #666;
	}
	.search{
		height: .82rem;
		line-height: .82rem;
		background: @bgColor;
		padding:0 .2rem;
		.search-input{
			width: 100%;
			border-radius: .06rem;
			padding: 0 .1rem;
			box-sizing: border-box;
			text-align: center;
			color:#666;
			height: .62rem;
		}
	}
	.city-list-wrap{
		position: absolute;
		top:1.7rem;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 30;
		background: #fff;
		overflow: hidden;
		.city-item{
			height: .64rem;
			line-height: .64rem;
			padding-left: .2rem;
		}
	}
</style>